<template>
  <div
    v-if="routerView"
    v-loading="pageIsLoading"
    class="app-main-container"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <!-- <vab-github-corner /> 去掉github的logo -->
    <transition mode="out-in" name="fade-transform">
      <keep-alive :include="cachedRoutes" :max="keepAliveMaxNum">
        <router-view :key="key" class="page-container" />
      </keep-alive>
    </transition>
    <footer v-if="footerCopyright" class="footer-copyright">
      Copyright
      <vab-icon :icon="['fas', 'copyright']"></vab-icon>
      瑞智综合管理系统 {{ fullYear }}
    </footer>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import { copyright, footerCopyright, keepAliveMaxNum, title } from '@/config'

  export default {
    name: 'VabAppMain',
    data() {
      return {
        show: false,
        fullYear: new Date().getFullYear(),
        copyright,
        title,
        keepAliveMaxNum,
        routerView: true,
        footerCopyright,
      }
    },
    computed: {
      ...mapGetters({
        visitedRoutes: 'tabsBar/visitedRoutes',
        device: 'settings/device',
        pageIsLoading: 'routes/routePageLoading',
      }),
      cachedRoutes() {
        const cachedRoutesArr = []
        this.visitedRoutes.forEach((item) => {
          if (!item.meta.noKeepAlive) {
            cachedRoutesArr.push(item.name)
          }
        })
        return cachedRoutesArr
      },
      key() {
        return this.$route.path
      },
    },
    watch: {
      $route: {
        handler(route) {
          if ('mobile' === this.device) this.foldSideBar()
        },
        immediate: true,
      },
    },
    created() {
      //重载所有路由
      this.$baseEventBus.$on('reload-router-view', () => {
        this.routerView = false
        this.$nextTick(() => {
          this.routerView = true
        })
      })
    },
    mounted() {},
    methods: {
      ...mapActions({
        foldSideBar: 'settings/foldSideBar',
      }),
    },
  }
</script>

<style lang="scss" scoped>
  .app-main-container {
    position: relative;
    width: 100%;
    height: calc(100vh - #{$base-nav-bar-height} - 0px);
    overflow: scroll;
    .vab-keel {
      margin: $base-padding;
    }
    // .app-main-height {
    //   // min-height: $base-app-main-height; 不做设置，在全局的page-container设置，这里设置会覆盖全局
    //   // min-height: calc(100vh - #{$base-nav-bar-height} - 4 * #{$app-container-margin});  // margin + padding 各10px
    // }

    .footer-copyright {
      min-height: 40px;
      line-height: 40px;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
      border-top: 1px dashed $base-border-color;
    }
  }
</style>
